<template>
  <el-container>
    <el-aside :width="widthPx">
      <el-menu :default-active="route.path" class="menu" router>
        <div class="infs">
          <span>{{ userStore?.user?.name }}，您好！</span>
          <span style="margin-top: 10px;">
            {{ todayWeekDay }}
          </span>
          <span>
            {{ timeClock }}
          </span>
          <span style="margin-top: 10px;">
            {{ userStore?.restaurantName }}
          </span>
        </div>
        <el-button class="collapse" type="primary" size="small" round
          :style="{ left: widthPx === '180px' ? '160px' : '10px' }"
          @click="widthPx = widthPx === '180px' ? '0px' : '180px'">{{ widthPx === '180px' ? '<' : '>' }}</el-button>
            <el-menu-item v-for="item in menus" :key="item.path" :index="item.path">
              {{ item.name }}
            </el-menu-item>
            <el-button class="logoutBtn" @click="logout">退出登录</el-button>
            <!-- <el-button class="logoutBtn notice" link @click="showNotice">
              <el-icon>
                <Bell />
              </el-icon>
            </el-button> -->
      </el-menu>
    </el-aside>
    <el-main class="main">
      <router-view />
    </el-main>
    <!-- 通知窗口 -->
    <el-dialog v-model="noticeVisible" title="通知" width="30%">
      <span>暂无通知</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="noticeVisible = false">取 消</el-button>
          <el-button type="primary" @click="noticeVisible = false">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </el-container>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from '@/stores';
import { ElMessage } from 'element-plus';
import { Api } from '@/api';

const userStore = useUserStore();
const router = useRouter();
const route = useRoute();
const widthPx = ref('180px');
const menus = ref([]);

onMounted(() => {
  const routes = router.options.routes;
  // menus为routes第一项中的children
  menus.value = routes[0].children.filter(item => {
    // 确保item.meta和userStore.user.role存在
    if (item.meta && userStore.user) {
      // 如果meta.show是一个函数，则执行它，否则直接比较值
      const show = typeof item.meta.show === 'function' ? item.meta.show(userStore.user.role) : item.meta.show;
      return show === true || show === userStore.user.role;
    }
    return false;
  });
  _getName()

});
const _getName = async () => {
  const res = await Api.getPrice()
  if (res.status === 200) {
    userStore.restaurantName = res.data.restaurantName
  } else {
    console.log(res)
  }
}


watch(() => userStore.user, (newVal) => {
  if (newVal) {
    menus.value = router.options.routes[0].children.filter(item => {
      if (item.meta && userStore.user) {
        const show = typeof item.meta.show === 'function' ? item.meta.show(userStore.user.role) : item.meta.show;
        return show === true || show === userStore.user.role;
      }
      return false;
    });
  } else {
    menus.value = [];
  }
})

const logout = () => {
  userStore.token = '';
  userStore.user = null;
  ElMessage.success('退出登录成功');
  router.push('/login');
};

const timeClock = ref(new Date().toLocaleString());
const todayWeekDay = ref(new Date().getDay())
//将todayWeekDay转换为中文
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
todayWeekDay.value = weekDays[todayWeekDay.value];
console.log(todayWeekDay.value);

onMounted(() => {

  setInterval(() => {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1;
    const day = now.getDate();
    const hour = now.getHours();
    const minute = now.getMinutes();
    const second = now.getSeconds();
    // 补零
    const hourStr = hour < 10 ? '0' + hour : hour;
    const minuteStr = minute < 10 ? '0' + minute : minute;
    const secondStr = second < 10 ? '0' + second : second;
    timeClock.value = `${year}/${month}/${day} ${hourStr}:${minuteStr}:${secondStr}`;
  }, 1000);
});

const noticeVisible = ref(false)
const showNotice = () => {
  noticeVisible.value = !noticeVisible.value;
}
</script>

<style scoped lang="scss">
.menu {
  height: 100vh;
  border: 1px solid #d3dce6;
}

.main {
  padding: 20px;
  height: 100vh;
  overflow: auto;
}

.collapse {
  z-index: 999;
  position: fixed;
  top: 50%;
  left: 10px;
  padding: 15px;
}

.logoutBtn {
  position: absolute;
  bottom: 10px;
  left: 20px;
  height: 30px;

  &.notice {
    left: 100px;
    font-size: 30px;
  }
}

.infs {
  height: 150px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>